<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>轮播</title>
        <style type="text/css">
            .scroll {
                width: 360px;
                height: 190px;
                overflow: hidden;
                margin: 0 auto;
                position: relative;
            }            
            #rad {
                position: absolute;
                width: 180px;
                height: 25px;
                z-index: 2;
                left: 100px;
                bottom: 3px;
            }
        </style>
        <script type="text/javascript">
        	//放图片路径的数组
        	var im=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
        	//点击更换图片和radio的cheched
        	function dianji(d){
        		for(var i=0;i<im.length;i++){
        			if(document.getElementsByTagName("input")[i].checked){
        				document.getElementById("photo").src=im[i];
        			}
        		}
        	}
        	//计时器为0
        	var tu=0;
        	//自动播放，每次都改变checked的状态和图片，tu==5的时候就重新置零
        	function zidong(){
        		document.getElementById("photo").src=im[tu];
        		document.getElementsByTagName("input")[tu].checked="checked";
        		tu++;
        		if(tu==5){
        			tu=0;
        		}
        		
        	}
        	//每隔一定时间循环依次自动zidong（）
        	var xunhuan=setInterval("zidong()",1000);
        	//鼠标悬停就可以清除计时器；
        	function xuanting(){
        		clearInterval(xunhuan);
        	}
        	//鼠标放上去继续记时，不能用var 重新定义循环
        	function goon(){
        		xunhuan=setInterval("zidong()",1000);       		
        	}
        </script>
    </head>

    <body>
        <div class="scroll" onload="zidong()">
            <div id="rad"> 
            	<input type="radio" name="cho" value="" checked="checked" onclick="dianji(this)"/>
                <input type="radio" name="cho" value="" onclick="dianji(this)" /> 
                <input type="radio" name="cho" value="" onclick="dianji(this)" /> 
                <input type="radio" name="cho" value="" onclick="dianji(this)" /> 
                <input type="radio" name="cho" value="" onclick="dianji(this)" /> 
            </div> <img src="1.jpg" alt="图片" id="photo" onmouseover="xuanting()" onmouseout="goon()"/> 
        </div>
    </body>

</html>